<template>
    <div v-if="islist">
        <div style="float:left">
            <el-button type="primary" @click="addHandler">添加</el-button>
            <el-button type="danger" @click="delMore">删除</el-button>
        </div>
        

        <el-table :data="rooms" @select="getSelection" ref="roomRef">
            <el-table-column type="selection" width="55" />
            <el-table-column label="id" prop="roomId" />
            <el-table-column label="会议室名称" prop="roomName" />
            <el-table-column label="状态" prop="roomState" />
            <el-table-column label="位置" prop="roomAddr" />
            <el-table-column label="类型" prop="roomType" />
            <el-table-column label="说明" prop="roomComment" />
            <el-table-column label="操作">
                <template v-slot="scope">
                    <el-button link type="warning" @click="updateHandler(scope.row)">修改</el-button>
                    <el-button link type="danger" @click="del(scope.row.roomId)">删除</el-button>
                </template>
                
            </el-table-column>
        </el-table>
    </div>
    <div v-else>
        <div>添加/修改</div>
        <el-form :model="form" label-width="auto"  style="width: 300px;margin:0 auto">
            <el-form-item label="会议室名称" prop="roomName">
            <el-input v-model="form.roomName"  placeholder="请输入会议室名称" />
            </el-form-item>
            <el-form-item label="状态" prop="roomState">
                <el-input v-model="form.roomState"   />
            </el-form-item> 
            <el-form-item label="位置" prop="roomAddr">
                <el-input v-model="form.roomAddr" />
            </el-form-item>

            <el-form-item label="类型" prop="roomType">
                <el-input v-model="form.roomType" />
            </el-form-item>

            <el-form-item label="介绍" prop="roomComment">
                <el-input v-model="form.roomComment" />
            </el-form-item>

            <el-form-item>
            <el-button type="primary" @click="submitHandler">提交</el-button>
            <el-button type="warning" @click="back">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
    
</template>

<script>
import Room from '../../api/room'

export default{
    data(){
        return{
            islist:true, /**判断是列表还是其他 */
            rooms:[],
            form:{

            },
            isadd:true /**判断是添加还是删除 */
        }
    },
    mounted(){
        this.getRooms()
    },
    methods:{
        getRooms(){
            Room.rooms().then(r=>{
                if(r.code==1){
                    this.rooms = r.data.records
                }
            })
        },
        addHandler(){
            this.isadd = true
            this.form = {}
            this.islist = false
        },
        updateHandler(row){
            this.isadd = false
            this.form = row
            this.islist = false
        },
        submitHandler(){
            if(this.isadd){
                Room.addroom(this.form).then(r=>{
                    if(r.code==1){
                        this.islist = true
                        this.getRooms()
                    }
                })
            }else{
                Room.updateroom(this.form).then(r=>{
                    if(r.code==1){
                        this.islist = true
                        this.getRooms()
                    }
                })
            }
            
        },
        del(id){
            Room.delroom(id).then(r=>{
                console.log(r)
            })
        },
        back(){
            this.islist = true
        },
        getSelection(e){
            const ids = this.$refs.roomRef.getSelectionRows().map(room=>{
                return room.roomId
            })
            console.log(ids,'ids')
        },
        delMore(){
            Room.delmore(this.ids).then(r=>{
                console.log(r)
            })
        }

    }
}
</script>